import { Callout, Tabs } from 'nextra/components'

# 快速开始

Umo-Editor 是一个基于 Vue3 的文档编辑器。
您可以访问[https://umodoc.com/demo](https://umodoc.com/demo)，体验和测试 Umo Editor 的部分功能。

## 安装

### 使用 NPM 安装

```sh npm2yarn
npm install --save @umoteam/editor
```

<Callout type="warning" emoji="⚠️">
**注意**：自 v3.0 版本开始，Umo Editor 取消了对 UMD 版本的支持。
</Callout>

## 使用

以下使用方式任选一种即可：

### 全局安装
```js filename="main.js"
import { createApp } from 'vue';
import { useUmoEditor } from '@umoteam/editor';

const app = createApp(App);
app.use(useUmoEditor, {
  // 配置项
  // ...
});
app.mount('#app');
```

### 直接引入

以下组合式 API 和选项式 API 的 JS 示例任选一种使用。

```vue filename="component.vue"
<template>
  <umo-editor v-bind="options" />
  <!-- 或者 -->
  <!-- 
  <umo-editor 
    :editor-key="options.editorKey" 
    ... 
  /> -->
</template>

// 使用组合式 API
<script setup>
  import { ref } from 'vue'
  import { UmoEditor } from '@umoteam/editor';

  const options = ref({
    // 配置项
    // ...
  });
</script>

// 或使用选项式 API
<script>
  import { UmoEditor } from '@umoteam/editor';

  export default {
    components: {
      UmoEditor
    },
    data() {
      return {
        options: {
          // 配置项
          // ...
        }
      }
    }
  }
</script>
```

### 在 Nuxt3 中使用

<Tabs items={['方法1：使用 Nuxt 模块', '方法2：直接引入']}>
<Tabs.Tab>

#### 安装

```bash
npx nuxi module add @umoteam/umo-editor-nuxt
# 或
npm i @umoteam/umo-editor-nuxt
```

#### 使用

1. 安装和配置 `@umoteam/umo-editor-nuxt` 模块

```ts filename="nuxt.config.ts"
export default defineNuxtConfig({
  modules: ['@umoteam/umo-editor-nuxt'],
  umoEditor: {
    // 全局配置项，默认配置见：
    // https://editor.umodoc.com/cn/docs/options/default
    locale: 'en-US',
  },
})
```

2. 使用 Umo Editor 组件

```vue
<template>
  <div style="height: 600px;">
    <UmoEditor v-bind="options" />
  </div>
</template>

<script setup>
const options = ref({
    // 配置项，见:
    // https://editor.umodoc.com/cn/docs/options/default
})
</script>
```
</Tabs.Tab>
<Tabs.Tab>

Umo Editor 暂不支持 SSR，在 Nuxt3 中 SSR 模式下，可以使用 `<client-only>` 组件或其他方式来保证 Umo Editor 在客户端渲染和使用。

```vue {2,4} filename="component.vue"
<template>
  <client-only>
    <umo-editor v-bind="options" />
  </client-only>
</template>

<script setup>
  import { UmoEditor } from '@umoteam/editor';

  const options = ref({
    // 配置项
    // ...
  });
</script>
```

更多使用方式参考 [使用](#使用)。
</Tabs.Tab>
</Tabs>

## 配置

见[配置项](./options/default)。
